<template>
    <div class="mb-3">
        <form action="#">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label class="form-control-label">班级名称</label>
                        <input v-model="formData.title" type="text" class="form-control" placeholder="请输入班级名称">
                    </div>
                    <app-class-level v-model="formData.level" />
                    <div class="form-group">
                        <label class="form-control-label">教学科目</label>

                        <div>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" checked>
                                <span class="checkmark"></span> Scratch
                            </label>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio">
                                <span class="checkmark"></span> Python
                            </label>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio">
                                <span class="checkmark"></span> C++
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-control-label">班级类型</label>
                        <div>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" checked>
                                <span class="checkmark"></span> 常规
                            </label>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio">
                                <span class="checkmark"></span> 集训
                            </label>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio">
                                <span class="checkmark"></span> 试听
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">班级状态</label>

                        <div>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradiostate" :value="true" v-model="formData.state">
                                <span class="checkmark"></span> 开课中
                            </label>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradiostate" :value="false" v-model="formData.state">
                                <span class="checkmark"></span> 已毕业
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">邀请码</label>
                        <input type="text" class="form-control" placeholder="请输入邀请码">
                    </div>

                    <div class="form-group">
                        <label class="form-control-label">自动限开次数(0表示不限制)</label>
                        <input type="text" class="form-control" placeholder="请输入自动限开次数">
                    </div>

                    <div class="update-profile">
                        <button @click="save" type="button" class="btn btn-primary">保存修改</button>
                    </div>
                </div>
            </div>

        </form>
    </div>
</template>

<script setup>
const route = useRoute()
import classApi from '@/api/classApi'
const search = async () => {
    const id = route.query.id
    if (!id) {
        alert('参数错误,请选择具体的班级')
        router.push('/teacher/class')
        return;
    }
    classInfo.id = id
    const data = await classApi.getDetail(id)
    formData.title = data.title
    formData.level = data.level
    formData.type = data.type
    formData.subject = data.subject
    formData.learnMethod = data.learnMethod
    formData.tenantID = data.tenantID
    formData.tearcherID = data.tearcherID
    formData.state = data.state



}

const classInfo = reactive({
    id: ''
})

const save = async () => {
    await classApi.put(classInfo.id, formData)
    alert('修改班级信息成功')
}
onMounted(() => {
    search()
})
const formData = reactive({
    name: '',
    state: true,
    course: '',
    type: '',
    code: '',
    limit: 0
})

</script>